<template>
  <div class="user-view">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <div class="base-info-panel info-panel">
          <div class="user-pic">
            <el-upload class="avatar-uploader" :action="imgserver" :show-file-list="false" :on-success="picUploadSuccess" :before-upload="picBeforeUpload">
              <img v-if="mUser.pic" :src="mUser.pic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="base-info">
            <el-form ref="form" :model="mUser" label-width="4em">
              <el-form-item label="姓名" prop="name" :rules="[{ required: true, trigger: 'blur' }]">
                <el-input v-model="mUser.name"></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="mUser.nickname"></el-input>
              </el-form-item>
              <el-form-item label="生日">
                <el-date-picker v-model="mUser.birthday" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="性别 ">
                <el-radio-group v-model="mUser.sex">
                  <el-radio label="w">妹子</el-radio>
                  <el-radio label="m">汉子</el-radio>
                  <el-radio label="o">其他</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="评分">
                <el-rate v-model="mUser.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
              </el-form-item>
              <el-form-item prop="email" label="邮箱" :rules="[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
                <el-input v-model="mUser.email"></el-input>
              </el-form-item>
              <el-form-item prop="tel" label="电话" :rules="rule.validateMobile">
                <el-input v-model="mUser.tel"></el-input>
              </el-form-item>
              <el-form-item prop="qq" label="QQ">
                <el-input v-model="mUser.qq"></el-input>
              </el-form-item>
              <el-form-item prop="birthplace" label="出生地">
                <el-input v-model="mUser.birthplace"></el-input>
              </el-form-item>
              <el-form-item prop="residence" label="居住地">
                <el-input v-model="mUser.residence"></el-input>
              </el-form-item>
              <el-form-item prop="description" label="简介">
                <el-input v-model="mUser.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item prop="blood" label="血型">
                <el-input v-model="mUser.blood"></el-input>
              </el-form-item>
              <el-form-item prop="stature" label="身高">
                <el-input v-model="mUser.stature"></el-input>
              </el-form-item>
              <el-form-item prop="bust" label="智力">
                <el-input v-model="mUser.bust"></el-input>
              </el-form-item>
              <el-form-item prop="waist" label="敏捷">
                <el-input v-model="mUser.waist"></el-input>
              </el-form-item>
              <el-form-item prop="hip" label="力量">
                <el-input v-model="mUser.hip"></el-input>
              </el-form-item>
              <el-form-item prop="group" label="分组">
                <el-select v-model="mUser.group" placeholder="请选择">
                  <el-option label="英雄" value="hero"> </el-option>
                  <el-option label="仙女" value="peri"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="图片" name="second" :disabled="mUser.id==null">
        <div class="image-info-panel ">
          <ul></ul>
          <el-upload :action="imgserver" list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="mUser.pictures" :on-success="pictureUploadSuccess" :on-remove="pictureRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="故事" name="third" :disabled="mUser.id==null">
        <ul class="story-list">
          <li v-for="(item, index) in mUser.stories" :key="index">
            <div class="title">
              <div>{{item.title}}</div>
              <div>{{item.createdAt | dateFormat('YY-MM-DD HH:mm:ss')}}</div>
            </div>
            <div class="content">
              <div> {{item.content}}</div>
              <el-button icon="delete" @click="vdelStory(item)"></el-button>
            </div>
          </li>
        </ul>
        <div class="story-info-panel ">
          <el-input type="textarea" icon="search" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="newstory">
          </el-input>
          <el-button-group style="float:right">
            <el-button icon="fa-comment" @click="vaddStory">提交</el-button>
          </el-button-group>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="dialogVisible" size="full">
      <div slot="title">{{dialogTitle}}</div>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
// import moment from 'moment';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import moment from 'moment';


export default {
  name: 'user',
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空...'));
      } else if (!/^1[3-9]{1}[0-9]{9}$/.test(value)) {
        return callback(new Error('手机号不正确..'));
      } else {
        callback();
      }
      return true;
    };
    return {
      rule: { validateMobile: [{ validator: validateMobile, trigger: 'blur' }] },
      imgserver: 'http://localhost:3000/upload',
      dialogVisible: false,
      dialogImageUrl: '',
      dialogTitle: '',
      activeName: 'first',
      newstory: '',
    };
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['mUser']),
  },
  filters: {
    dateFormat: (date, formater) => {
      return moment(date).format(formater || 'YYYY-MM-DD');
    },
  },
  methods: {
    vSaveUser() {
      this.saveUser().then((msg) => {
        this.$message(msg.errMsg);
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogTitle = file.uid;
      this.dialogVisible = true;
    },
    picBeforeUpload(file) {
      this.user.pic = URL.createObjectURL(file);
    },
    picUploadSuccess(res) {
      this.user.pic = res.url;
    },
    pictureUploadSuccess(res) {
      this.addPicture({ url: res.url });
    },
    pictureRemove(image) {
      this.delPicture(image);
    },
    vaddStory() {
      debugger;
      const regex = /(?:\[)[\w\W]*(?:\])/gi;
      const tempTitleReg = this.newstory.match(regex);
      const title = tempTitleReg === null ? '' : tempTitleReg[0];
      let content = this.newstory;
      if (title !== '') {
        content = this.newstory.replace(title, '');
      }
      this.addStory({ content, title: title.replace('[', '').replace(']', '') }).then(() => {
        debugger;
        this.newstory = '';
      });
    },
    vdelStory(story) {
      this.delStory(story);
    },
    ...mapMutations(['CreateUser']),
    ...mapActions(['saveUser', 'addPicture', 'delPicture', 'addStory', 'delStory']),
  },
  components: {
  },
};
</script>

<style lang="less">
.user-view {
  height: 100%;
  text-align: left;
  .base-info-panel {
    .user-pic {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      box-shadow: inset 0 0 2px;
      margin: 0 auto;
      overflow: hidden;

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        min-width: 200px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 100%;
        min-width: 150px;
        min-height: 150px;
        display: block;
      }
    }
    .base-info {
      text-align: left;
      margin-top: 10px;
    }
    .btn-submit {
      float: right;
    }
  }
  .image-info-panel,
  .story-info-panel {
    margin: 0 auto;
    text-align: left;
    .el-button-group {
      margin: 5px 0;
    }
  }
  .image-info-panel {
    .el-upload-list {
      text-align: center;
      img {
        height: 100%;
        width: auto;
      }
    }
  }
  .story-list {
    list-style: none;
    padding: 0 5px;
    .title {
      display: flex;
      font-weight: bold;
      justify-content: space-between;
    }
    .content {
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      button {
        padding: 0;
      }
    }
  }
}
</style>
